var PIXI = require('pixi.js');
var test = require('./queryContent.js');
var 
	next,//页面计数器
	container,//容器
	stage,//底层容器
	queryBox,//测试问题背景框
	answerBoxArr,//答案内容数组
	queryContainer,//问答页面总容器，
	queryTextContainer,//问答主体容器，用来控制动画
	resultContainer,//结果页面容器
	answerBox, //问答页答案背景框
	topbanner,//问答页顶部计数栏
	topbannerY,
	topbannerH,
	animateCount = 0, //动画帧数统计
	tR,
	count, //动画帧数统计
	aflag,
	queryText,
	answerText,
	width,//总渲染区域宽度
	height,//总渲染区域高度
	baseStyle//基础的文本样式
	;
var renderer = PIXI.autoDetectRenderer(window.innerWidth || 375, window.innerHeight || 667,{backgroundColor : 0Xfeea6f});

//

stage = new PIXI.Container();

//注册控件
queryText = null;
answerText = [];
count = 0 ; //计数器
width = renderer.width;
height = renderer.height;

baseStyle = {

    fontFamily :"'Huakang' ,'Tahoma','Arial','Roboto','Droid Sans Fallback','Heiti SC','Microsoft YaHei', '黑体',sans-self",
    fontSize : '18px',
    fill : '#000',
    lineHeight: 24,
    breakWords: true,
    wordWrap : true,
    wordWrapWidth :  width
};
//按钮图片
var answerBg = PIXI.Texture.fromImage(require('./images/answer-box.png'));
var answerActive = PIXI.Texture.fromImage(require('./images/answer-box-active.png'));

module.exports = function () {
	document.body.appendChild(renderer.view);
	startPage();
	animate();
}

function animate() {

 	if(next === 2)  { topBannerAnimation(topbanner);textAnimation();}
    // render the container
    
    renderer.render(stage);
   	animateCount ++;

    requestAnimationFrame(animate);
}


function queryview(index) {

	if(queryContainer) stage.removeChildren();
	answerBoxArr = [];
	queryContainer = new PIXI.Container();
	//单独生成querytextContain 控制文字动画
	queryTextContainer = new PIXI.Container();
	// queryContainer.addChild(queryTextContainer);
	stage.addChild(queryContainer);
	stage.addChild(queryTextContainer);
	//生成控件
	//background 
	var bg = PIXI.Sprite.fromImage(require('./images/bg.png'));
	bg.anchor.set(0.5);
	bg.height = height;
	bg.x = 0.5 * width;
	bg.y = 0.5 * height;
	
	//topbanner
	topbanner = new PIXI.Sprite();
	var topbannerText = new PIXI.Text('测试第' + (count + 1) +'题', baseStyle);
	var topbannerbg = PIXI.Sprite.fromImage(require('./images/count-banner.png'));
	

	topbannerbg.width = 0.6 * width;
	topbannerbg.height = topbannerH = height * 0.2 ;
	topbannerbg.anchor.x = 0.5;
	topbannerbg.x = 0.5 * width;
	topbannerbg.y = topbannerY = 0;

	topbannerText.style.fontSize = '18px';
	topbannerText.anchor.set(0.5);
	topbannerText.x = 0.5 * width;
	topbannerText.y = topbannerbg.height * 0.83 ;

	// topbanner.x = 0;
	
	topbanner.addChild(topbannerbg);
	topbanner.addChild(topbannerText);
	
	//queryBox
	queryBox = PIXI.Sprite.fromImage(require('./images/content-banner.png'));
	queryBox.anchor.set(0.5);
	queryBox.x = 0.5 * width;
	queryBox.y = 0.45 * height;

	queryBox.width = 0.8 * width;
	queryBox.height = queryBox.width * 0.64;
	queryBox.height = 0.4 * height;

	
	queryContainer.addChild(bg);
	
	queryTextContainer.addChild(queryBox);
	queryContainer.addChild(topbanner);
	var current = test[index-1];
	var answerY = 250;
	//生成query文字
	queryText = new PIXI.Text(current['content'], baseStyle);
	queryText.anchor.set(0.5);
	queryText.x = 0.5 * width;
	queryText.y = 0.45 * height;
	queryText.style.fontSize = '24px';
	queryText.style.lineHeight = '45';
	queryText.style.wordWrapWidth = 0.7 * width ;

	//添加到内容背景框
    queryTextContainer.addChild(queryText);
    
	//生成answer
	current.answer.forEach(function (answer,i) {

		//一个萝卜一个坑,先生成answerBox
		var answerBox = new PIXI.Sprite(answerBg);

		//answerText
		var answerText = new PIXI.Text(answer[0], baseStyle);
		answerText.style.wordWrapWidth = 0.6 * width;
		answerText.style.fontSize = '16px';
		answerText.anchor.x = 0.5;
		answerText.x = 0.5 * width;
		answerText.y = i === 0 ? queryBox.y + queryBox.height/2 + 50  : answerBoxArr[i-1].y + answerBoxArr[i-1].height + 20;

		answerBox.anchor.x = 0.5;
		answerBox.x = answerText.x;
		answerBox.y = answerText.y - answerText.height/2 ;
		answerBox.width = 0.8 * width;
		answerBox.height = answerText.height + 15;
		
		
		//绑定点击切换试题
		answerBox.interactive = true;
		// //绑定切换事件
		answerBox.on('mousedown', answerBoxDown);
		answerBox.on('touchstart', answerBoxDown);
		answerBox.on('mouseup', viewHandle)
		answerBox.on('touchend',viewHandle)


		queryTextContainer.addChild(answerBox);
		queryTextContainer.addChild(answerText);
		//加入数组，待用；
		answerBoxArr.push(answerBox);
		//切换响应事件，切换下一页内容
		function viewHandle (data) {
			++ count;
			if(typeof answer[1] === 'object') {
				//清理门户
				stage.removeChildren();
				
				//显示结果页面
				resultPage(answer[1]);
				
				//显示下一题
			}else queryview(answer[1]);
			//重新计数
			animateCount = 0;
		} 

		function answerBoxDown() {
			this.texture = answerActive;
			answerText.style.fill = '#fff';
		}
		
	}) ;
}
var oy = 0, ox = 0, tx, ty;
function textAnimation(){ 
	if(animateCount === 0){
		aflag = Math.random() > 0.5 ? false : true;
		
		queryTextContainer.rotation =  aflag? Math.PI / 4 : - Math.PI / 4; 
		tR = 0;
	}

	if(Math.abs((tR - queryTextContainer.rotation).toFixed(2))<= 0.05){
		
		return queryTextContainer.rotation = tR;
	}
	aflag? queryTextContainer.rotation -= 0.05 : queryTextContainer.rotation += 0.05;
	
}


function topBannerAnimation(obj) {
	
	if(animateCount === 0){obj.y = -topbannerH}
	if(Math.abs(obj.y - topbannerY) < animateCount + 4) {
		return obj.y = topbannerY;
	}
	obj.y += 1 * animateCount + 4;
}

//渲染结果
function resultPage(answer) {
	resultContainer = new PIXI.Container();

	var bg = PIXI.Sprite.fromImage(require('./images/result-banner.png'));
	bg.anchor.set(0.5);
	bg.width = width;
	bg.height = bg.width * 1.78;
	bg.x = 0.5 * width;
	bg.y = 0.5 * height;

	var resultTitle = new PIXI.Text('测试结果' , baseStyle);
	
	resultTitle.x = 10;
	resultTitle.y = 10;

	resultTitle.style.fontSize =  '30px';
	
	var resultConetent = new PIXI.Text(answer['content'],baseStyle);
	resultConetent.style.fontFamily = "Tahoma,Arial,'Heiti SC','Microsoft YaHei', '黑体',sans-self";
	// resultConetent.style.fontSize = '16px';
	// resultConetent.style.lineHeight = '32px';

	var resultTitle  = new PIXI.Text(answer['title'], baseStyle);
	resultTitle.anchor.x = 0.5 ;
	resultTitle.y = 0.12 * height;
	resultTitle.x = 0.5 * width;
	resultTitle.style.fontSize = '24px';
	resultTitle.style.fill = '#f95edd';

	resultConetent.style.fill = '#000';
	resultConetent.style.wordWrapWidth = 0.8 * width;
	resultConetent.anchor.x = 0.5;
	resultConetent.x = 0.5 * width;
	resultConetent.y = resultTitle.y + resultTitle.height + 30;
	

	var code2 = new PIXI.Sprite.fromImage(require('./images/code.png'));
	code2.width = 0.3 * width;
	code2.height = 0.3 * width;
	code2.anchor.x = 0.5;
	code2.x = 0.5 * width;
	code2.y = resultConetent.y + resultConetent.height + 40;
	resultContainer.addChild(bg);
	resultContainer.addChild(resultTitle);
	resultContainer.addChild(resultConetent);
	resultContainer.addChild(code2)
	stage.addChild(resultContainer);
} 

function startPage() {
	container = new PIXI.Container();
	var texture = PIXI.Texture.fromImage(require('./images/start.png'));
	var start = new PIXI.Sprite(texture);
	start.width = 0.5 * width;
	start.height = 0.1 * height;
	start.anchor.x = 0.5;
	start.anchor.y = 0.5;
	start.x = 0.5 * width;
	start.y = 0.9 * height;

	var startText = new PIXI.Text('start', baseStyle);
	startText.y = -50;
	container.addChild(startText);
	var bg = PIXI.Sprite.fromImage(require('./images/startpage.png'));
	
	bg.width  =  width;
	bg.height = height;
	bg.anchor.x = 0.5;
	bg.anchor.y = 0.5;
	bg.position.x = width/2;
	bg.position.y = height/2;

	start.interactive = true;
	start.on('mousedown', switchTo);
	start.on('tap', switchTo);
	
	container.addChild(bg);
	container.addChild(start);
	stage.addChild(container);
	
	
	function switchTo() {
		console.log('siwth to page 2');
		stage.removeChild(container);
		next = 2;
		animateCount = 0;
		queryview(1);
	}


	

}



